<template>
  <view class="order_content">
    <view class="type_tabs">
      <view
        class="type_item"
        v-for="item in tabs"
        :key="item.key"
        :class="{ active: item.key === currentType }"
        @click.stop="changeType(item.key)"
      >
        {{ item.label }}
      </view>
    </view>

    <MallOrder v-if="currentType === 0" :currentType="currentType"></MallOrder>
    <FuncardOrder
      v-if="currentType === 1"
      :currentType="currentType"
    ></FuncardOrder>
    <BiscuitOrder
      v-if="currentType === 2"
      :currentType="currentType"
    ></BiscuitOrder>
  </view>

  
</template>

<script setup>
import MallOrder from "./components/mall-order.vue";
import FuncardOrder from "./components/funcard-order.vue";
import BiscuitOrder from "./components/biscuit-order.vue";

import { ref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import privacyPopup from "@/components/privacy-popup";

const currentType = ref(0);
const tabs = ref([
  { label: "商城订单", key: 0 },
  { label: "FUN享卡订单", key: 1 },
  { label: "积分订单", key: 2 },
]);

onLoad((option) => {
  if (option.type) {
    changeType(parseInt(option.type));
  }
});
onReachBottom(() => {
  console.log("父组件触底~");
});

const changeType = (e) => {
  currentType.value = e;
};
</script>

<style lang="less" scoped>
.order_content {
  width: 375px;
  min-height: 667px;
  height: 100vh;
  font-size: 14px;
  font-family: Source Han Sans CN;
  .type_tabs {
    position: fixed;
    z-index: 10;
    width: 375px;
    height: 53px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .type_item {
      min-width: 64px;
      height: 53px;
      line-height: 53px;
      text-align: center;
      position: relative;
      font-size: 14px;
      color: #2a2a2a;
      box-sizing: border-box;
      &.active {
        color: #0058c6;

        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 3px;
          background: #0058c6;
          border-radius: 2px;
          left: 50%;
          transform: translate(-50%, 0);
          bottom: 0;
        }
      }
    }
  }
}
</style>